<template>
  <el-card class="box-card" ref="boxCard">
    <div slot="header" class="clearfix">
      <span>{{cardName}}</span>
      <slot name="tool"></slot>
    </div>
    <slot name="content"></slot>
  </el-card>
</template>

<script>
  export default {
    name: "Card",
    props: {
      cardName: {
        type: String,
      },
      cardWidth: {
        type: String,
        default: 'auto'
      },
      scalable: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      // 设置卡片的宽度
      setCardWidth(width) {
        let card = this.$refs.boxCard.$el;
        if (width != 'auto' && width.endsWith('%')) {
          card.style.width = width;
        } else {
          card.style.width = parseInt(width) + 'px';
        }
      },
      // 设置卡片是否需要进行悬停动画
      setScale(scalable) {
        if (scalable) {
          let card = this.$refs.boxCard.$el;
          card.onmouseenter = function() {
            card.style.transform = 'scale(1.05, 1.05)';
          }
          card.onmouseleave = function() {
            card.style.transform = 'scale(1, 1)';
          }
        }

      }
    },
    mounted() {
      // 初始化时设置卡片的宽度
      this.setCardWidth(this.cardWidth);
      // 初始化时设置是否需要进行鼠标悬停时的动画
      this.setScale(this.scalable);

    }
  }
</script>

<style scoped>

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    background-color: #e0e0e0;
    display: inline-block;
    cursor: pointer;
  }
  /*.box-card:hover {*/
    /*transform: scale(1.05, 1.05);*/
  /*}*/

</style>

<style>

  .el-card__header {
    border-bottom: 1px solid #fff;
  }
  .el-card__header span {
    font-size: 18px;
    letter-spacing: 2px;
    color: #666;
  }
  .el-calendar__header .el-calendar__title {
    color: #666
  }

</style>